import React, {useEffect, useState} from 'react';
import {Table, Tag, Button, Modal, Popover, Switch} from "antd";
import axios from 'axios';
import {EditOutlined, DeleteOutlined} from '@ant-design/icons';
import {ExclamationCircleOutlined} from '@ant-design/icons';

const {confirm} = Modal;

export default function RightList() {
    const [dataSource, setDataSource] = useState([])

    useEffect(() => {
        axios.get('/rights?_embed=children').then(res => {
            // console.log(res.data)
            const list = res.data
            list.forEach(item => {
                if (item.children.length === 0) {
                    item.children = ''
                }
            })
            setDataSource(list)
        })
    }, [])

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return <b>{id}</b>
            }
        },
        {
            title: '权限名称',
            dataIndex: 'title',
        },
        {
            title: '权限路径',
            dataIndex: 'key',
            render: (key) => {
                return <Tag color='orange'>{key}</Tag>
            },
        },
        {
            title: '操作',
            render: (item) => {
                return <div className='noselect'>
                    <Popover title={'配置项'}
                             content={<div style={{textAlign: 'center'}}><Switch checked={item.pagepermisson}
                                                                                 onChange={() => switchMethod(item)}/>
                             </div>} trigger={item.pagepermisson === undefined ? '' : 'click'}>
                        <Button type={item.pagepermisson===1?"primary":''} shape="circle" icon={<EditOutlined/>}
                                disabled={item.pagepermisson === undefined}/>
                    </Popover>
                    &nbsp;&nbsp;
                    <Button danger shape="circle" icon={<DeleteOutlined/>} onClick={() => confirmDel(item)}/>
                </div>
            }
        },
    ];

    // 页面配置开关函数
    const switchMethod = (item) => {
        item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
        setDataSource([...dataSource])
        console.log(item)
        // 后端同步
        if (item.grade ===1){
            axios.patch(`/rights/${item.id}`,{
                pagepermisson: item.pagepermisson
            }).then()
        }else {
            axios.patch(`/children/${item.id}`,{
                pagepermisson: item.pagepermisson
            }).then()
        }
    }

    // 删除确认提示框
    const confirmDel = (item) => {
        confirm({
            title: '你确定要删除?',
            icon: <ExclamationCircleOutlined/>,
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                deleteMethod(item)
            },
            onCancel() {
                console.log('取消');
            },
        });
    }

    // 确认删除后执行的函数
    const deleteMethod = (item) => {
        // console.log(item);

        // 当前页面同步状态 + 后端同步
        // 过滤出 dataSource 需要删除的一项，得到新的数据
        if (item.grade === 1) {
            setDataSource(dataSource.filter(data => data.id !== item.id))
            // 后端同步
            axios.delete(`/rights/${item.id}`).then()
        } else {
            // console.log(item.rightId)
            // 利用 rightId 可以得到一级 ID 号，然后过滤得出该项的一级菜单
            let delLevel1 = dataSource.filter(data => data.id === item.rightId)
            // 利用该项的一级菜单中的 children 过滤掉该项，得到删除该项后的新数据
            delLevel1[0].children = delLevel1[0].children.filter(data => data.id !== item.id)
            // ...展开，新老对比删除，重新渲染
            setDataSource([...dataSource])
            // 后端同步
            axios.delete(`/children/${item.id}`).then()
        }
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns}/>
        </div>
    )
}